<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>document.getElementsByTagName</title>
</head>
<style>
    * {
        list-style: none;
    }
</style>

<body>
    <ul>
        <li>胡歌</li>
        <li>彭于晏</li>
        <li>赵玉真</li>
        <li>小小怪</li>
        <li>大大怪</li>
        <li>谢怜</li>
    </ul>
    <hr>
    <ol id="ol">
        <li>胡歌</li>
        <li>彭于晏</li>
        <li>赵玉真</li>
        <li>小小怪</li>
        <li>大大怪</li>
        <li>谢怜</li>
    </ol>
    <script>
        // getElementsByTagName() 方法可返回带有指定标签名的对象的集合。 以伪数组形式存储的
        var lis = document.getElementsByTagName('li')//获取文档页面中所有为li的元素
        console.log(lis);
        console.dir(lis)
        console.log(lis[2])//返回的是索引为2的

        console.log('-----------------')
        //可以用循环遍历打印 
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
        console.log('------------------');

        // 方法一 ：不建议用这种方法
        //var ol = document.getElementsByTagName('ol')
        // console.log(ol.getElementsByTagName('li')); 错误
        //console.log(ol[0].getElementsByTagName('li'));

        //方法二： 给设置一个id唯一选择器然后获取id 然后在获取id下面所有li
        var ols = document.getElementById('ol')
        var lis1 = ols.getElementsByTagName('li')
        console.log(lis1);

        console.log('---------------');
        
        //等价document.getElementsByTagName('li')
        var li = document.querySelectorAll('li');
        console.log(li);
    </script>
</body>

</html>